import React, { useState,useEffect } from 'react';
import { Button, Table, Modal, Form, Input, Space, Switch, message ,Image,InputNumber } from 'antd';
const { Column, ColumnGroup } = Table;

import { getGoodsById,setOrderBySku } from '../../../../api/OrderApi'
interface PropsType {
    isSelectOpen: boolean;
    close(): void;
    goodsId:number | undefined;
    orderId:number | undefined;
    goodsInfo:any
}


interface DataType {
    key: React.Key;
    skuId: number;//序号
    type: string;//商品类型
    skuMsg: string;//尺码
    barCode: string;//条形码
    skuPrice: number;//价格
    skuMarketValue:number;//市场价
    skuStock:number;//商品库存
    skuImag:string;//商品图片
    itemNum:number;//选购数量
  }

function SelectGoods(props: PropsType) {
    // const [isOpen, setIsOpen] = useState<boolean>(false);
    const [data,setData]=useState<DataType[]>([])
    const [num,setNum]=useState<number>(1)
    const [select,setSelect]=useState<string>('取消选择')

    console.log('props--selsect', props);


    const handleOk = () => {
        // setIsModalOpen(false);
        props.close()
        message.success('选择商品类型成功')
    };

    const cancleHandle = () => {
        // setIsModalOpen(false);
        props.close()
        message.success('取消选择')
    };


    // 获取初始数据
    // useEffect(()=>{
    //     setData([
    //         {
    //             key:'1',
    //             number: 1,//序号
    //             type: '红色',//商品类型
    //             size: 'M',//尺码
    //             barCode: '123323232',//条形码
    //             price: 1212,//价格
    //             skuMarketValue:12121,//市场价
    //             skuStock:12,//商品库存
    //             skuImag:'string',//商品图片
    //         },
    //         {
    //             key:'2',
    //             number: 3,//序号
    //             type: '蓝色',//商品类型
    //             size: 'M',//尺码
    //             barCode: '123323232',//条形码
    //             price: 1212,//价格
    //             skuMarketValue:12121,//市场价
    //             skuStock:12,//商品库存
    //             skuImag:'string',//商品图片
    //         }
    //     ])
    // },[])

     useEffect(()=>{
        // getGoodsById({
        //     goodsId:props.goodsId,
        //     orderId:props.orderId
        // }).then(res=>{
        //     console.log('shangpigres',res);
            
        // }).catch(err=>{
        //     console.log('err000',err);
            
        // })
        // console.log('props.goodsInfo',props.goodsInfo);
        
        setData(props.goodsInfo);
     },[props.goodsInfo])

    //  取消选择商品
    const clicklSelect=(skuId:number)=>{
        console.log('点击了选择',num,skuId,props.orderId);
        // console.log('点击了选择',num);
        // if(skuId==1){
        //      setSelect('选择该商品')
        // }
        setOrderBySku({
            itemNum:num,
            skuId:skuId,
            orderId:props.orderId,
        }).then(res=>{
            console.log('res',res);
            message.success('选择成功')

        }).catch(err=>{
            console.log('err9999999',err);
            
        })
    }


    // 改变数量
    const onChange=(num:any)=>{
        console.log('gbl',num);
        setNum(num)
    }


    return (
        <>
            <Modal title="选择商品" open={props.isSelectOpen} onOk={handleOk} onCancel={cancleHandle} width={1000} forceRender>
                {/* 该商品的所有类型选择 */}
                <Table dataSource={data} bordered pagination={false} rowKey={item=>item.skuId}>
                    <Column title="序号" dataIndex="skuId" key="skuId" />
                    {/* <Column title="商品类型" dataIndex="type" key="type" /> */}
                    <Column title="尺码" dataIndex="skuMsg" key="skuMsg" />
                    <Column title="条形码" dataIndex="skuBarCode" key="skuBarCode" />
                    <Column title="价格" dataIndex="skuPrice" key="skuPrice" />
                    <Column title="市场价" dataIndex="skuMarketValue" key="skuMarketValue" />
                    {/* <Column title="商品库存" dataIndex="skuStock" key="skuStock" /> */}
                    <Column title="商品图片" dataIndex="skuImag" key="skuImag" 
                      render={(_: any, record: DataType) => (
                        <Image  
                          width={100}
                          height={50}
                          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
                        </Image>
                    )}
                    />
                     <Column title="选购数量" dataIndex="itemNum" key="itemNum" 
                      render={(_: any, record: DataType) => (
                        // <Image  
                        //   width={100}
                        //   height={50}
                        //   src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
                        // </Image>
                        <InputNumber min={1} max={10} defaultValue={record.itemNum} onChange={onChange} />
                    )}
                    />
                    <Column
                        title="操作"
                        key="action"
                        render={(_: any, record: DataType) => (
                            <Space size="middle">
                               {
                                 <Button type='link' onClick={()=>clicklSelect(record.skuId)}> {record.skuId==1 ? '取消选择' :'选择此商品'} </Button>
                               }
                            </Space>
                        )}
                    />
                </Table>

            </Modal>
        </>
    );
};

export default SelectGoods;